<template>
  <div class="notice-wrapper">
    <div class="notice">
      <h1 class="title">平台公告</h1>
      <ul class="notice-list">
        <li v-for="(item, index) in noticeData" :key="index" @click="findDetail(item.id)">
          <span class="notice-content">{{ item.title }}</span>
          <span class="notice-date">{{ item.date }}</span>
        </li>
      </ul>
      <div class="block">
        <el-pagination
          layout="prev, pager, next, jumper"
          :page-size="10"
          :pager-count="11"
          :total="2000"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "platform-notice",
  data() {
    return {
      currentPage: 3,
      noticeData: [
        {
          id: 1,
          title: "北京电力医院系统升级公告",
          content:"平台将于2021年1月14日21:00至2021年1月15日2:00进行平台升级工作，在此期间可能会影响平台的预约和查询业务，给您带来的不便敬请谅解。",
          date: "2020年12月30日",
        },
        {
          id: 2,
          title: "关于北京市第一中西结合医院12月25日晚暂停预约挂号的通知",
          content:"平台将于2021年1月14日21:00至2021年1月15日2:00进行平台升级工作，在此期间可能会影响平台的预约和查询业务，给您带来的不便敬请谅解。",
          date: "2020年12月30日",
        },
        {
          id: 3,
          title:
            "关于北京大学第四临床医学院北京积水潭医院(新街口院区、回龙观院区)暂停更新号源的通知",
          content:"平台将于2021年1月14日21:00至2021年1月15日2:00进行平台升级工作，在此期间可能会影响平台的预约和查询业务，给您带来的不便敬请谅解。",
          date: "2020年12月30日",
        },
        {
          id: 4,
          title: "北京电力医院系统升级公告",
          content:"平台将于2021年1月14日21:00至2021年1月15日2:00进行平台升级工作，在此期间可能会影响平台的预约和查询业务，给您带来的不便敬请谅解。",
          date: "2020年12月30日",
        },
        {
          id: 5,
          title: "北京电力医院系统升级公告",
          content:"平台将于2021年1月14日21:00至2021年1月15日2:00进行平台升级工作，在此期间可能会影响平台的预约和查询业务，给您带来的不便敬请谅解。",
          date: "2020年12月30日",
        },
        {
          id: 6,
          title: "北京电力医院系统升级公告",
          content:"平台将于2021年1月14日21:00至2021年1月15日2:00进行平台升级工作，在此期间可能会影响平台的预约和查询业务，给您带来的不便敬请谅解。",
          date: "2020年12月30日",
        },
        {
          id: 7,
          title: "北京电力医院系统升级公告",
          content:"平台将于2021年1月14日21:00至2021年1月15日2:00进行平台升级工作，在此期间可能会影响平台的预约和查询业务，给您带来的不便敬请谅解。",
          date: "2020年12月30日",
        },
        {
          id: 8,
          title: "北京电力医院系统升级公告",
          content:"平台将于2021年1月14日21:00至2021年1月15日2:00进行平台升级工作，在此期间可能会影响平台的预约和查询业务，给您带来的不便敬请谅解。",
          date: "2020年12月30日",
        },
        {
          id: 9,
          title: "北京电力医院系统升级公告",
          content:"平台将于2021年1月14日21:00至2021年1月15日2:00进行平台升级工作，在此期间可能会影响平台的预约和查询业务，给您带来的不便敬请谅解。",
          date: "2020年12月30日",
        },
        {
          id: 10,
          title: "北京电力医院系统升级公告",
          content:"平台将于2021年1月14日21:00至2021年1月15日2:00进行平台升级工作，在此期间可能会影响平台的预约和查询业务，给您带来的不便敬请谅解。",
          date: "2020年12月30日",
        },
      ],
    };
  },
  methods: {
    findDetail(id) {
      console.log(id);
      this.$store.commit("PNoticeHandleID",id)
    },
    handleCurrentChange(val) {
      console.log(val);
      
    },
  },
  created(){
    this.$store.commit("PNoticeHandle",this.noticeData);
  }
};
</script>

<style lang="scss" scoped>
.notice-wrapper {
  width: 1200px;
  margin: 0 auto;
  padding: 40px 0 0 0;
  height: 100%;
  box-sizing: border-box;
  .notice {
    .title {
      font-weight: 700;
      color: #333;
      font-size: 16px;
      letter-spacing: 1px;
    }
    .notice-list {
      min-height: 200px;
      box-sizing: border-box;
      margin-top: 50px;
      line-height: 35px;
      font-size: 12px;
      overflow: auto;
      li {
        cursor: pointer;
        .notice-date {
          float: right;
          color: #999;
        }
      }
      li:hover > span {
        color: #4490f1;
      }
    }
    .block {
      margin-top: 100px;
      text-align: center;
    }
  }
}
</style>
